<template>
  <div>
    <h2 class="big-title">销售退货提单列表</h2>
    <br>
    <br>
    <el-input placeholder="请输入内容" v-model="seachText" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
    </el-input>
    <br>
    <br>
    <hr>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="orderNo" label="单号" sortable width="180">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span> &nbsp;
          <el-tag size="mini" v-if="scope.row.status === 3" type="danger">不可用</el-tag>
          <el-tag size="mini" v-else type="success">可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="factoryName" label="收货工厂" sortable width="100"></el-table-column>

      <el-table-column prop="vendorCode" label="创建人"></el-table-column>
      <el-table-column prop="vendorName" label="创建时间"></el-table-column>
      <el-table-column prop="createdBy" label="状态" sortable></el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="totalNumber"
      @current-change="currentChange"
    ></el-pagination>
    <!-- 分割线 ---------------------->
  </div>
</template>

<script>
import { getLadingOrdersBackOrders } from '@/api/putInStorage';

export default {
  name: 'ladingOrder',
  components: {},
  data() {
    return {
      loading: false,
      itemTable: [], // 详情后的table
      formInline: {}, // 点击的当前行 所有数据
      outerTitle: '',
      outerVisible: false, // 第一层
      innerVisible: false,
      seachText: '',
      tableData: [],
      totalNumber: 0,
    };
  },
  created() {
    console.log('createdcreatedcreated');
    this.ininTableData();
  },
  computed: {
    // ...mapState({ token: state => state.user.token }),
  },
  methods: {
    ininTableData(searchKey = '', page = 0, size = 10) {
      const data = {
        searchKey,
        page,
        size,
        sort: 'createdDate,desc',
      };
      if (!searchKey.length) delete data.searchKey;
      getLadingOrdersBackOrders(data).then(res => {
        console.log(res, res.headers['x-total-count']);
        this.tableData = res.data;
        this.totalNumber = Number(res.headers['x-total-count']);
      });
    },
    handleClick() {
      this.loading = true;
      this.ininTableData(this.seachText);
      this.seachText = '';
    },
    currentChange(page) {
      this.ininTableData('', page - 1);
    },
    // eslint-disable-next-line consistent-return
    getStatus(status) {
      if (status === 1) {
        return '已审核';
      }
      if (status === 3) {
        return '待审核';
      }
    },
    openEditor(row) {
      this.formInline = row;
      console.log(row, row.orderNo);
      this.itemTable = row.orderItems;
      this.outerTitle = row.orderNo;
      this.outerVisible = true;
    },
  },
};
</script>
